<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useAuthStore } from '../../store/useAuthStore'
import { ElMessage } from 'element-plus'
import {
  Camera, User, Lock, Bell, Key, WarningFilled,
  Message, Phone, Monitor, Setting, Loading
} from '@element-plus/icons-vue'
import type { UploadProps, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { changePassword } from '../../api/auth'

const authStore = useAuthStore()
const activeTab = ref('profile')

// 个人信息表单相关
const profileFormRef = ref<FormInstance>()
const profileForm = reactive({
  username: authStore.user?.username || '',
  email: authStore.user?.email || '',
  avatar: authStore.user?.avatar || '',
  avatarUrl: authStore.user?.avatarUrl || '',
  nickname: authStore.user?.nickname || '',
  phone: authStore.user?.phone || ''
})
const profileSubmitting = ref(false)
const passwordSubmitting = ref(false)
const uploading = ref(false)
const displayAvatarUrl = computed(() => {
  const url = profileForm.avatarUrl || authStore.user?.avatarUrl || '';
  
  console.log('处理头像URL:', { 原始URL: url });
  
  // 如果URL为空，返回空字符串
  if (!url) {
    console.log('头像URL为空，返回空字符串');
    return '';
  }
  
  // 如果已经是完整的URL（以http或https开头），则直接使用
  if (url.startsWith('http://') || url.startsWith('https://')) {
    console.log('使用完整的URL:', url);
    return url;
  }
  
  // 获取后端API地址
  const backendUrl = 'http://127.0.0.1:8080';
  
  // 对于相对路径，需要拼接服务器地址
  // 确保路径正确（不同后端可能路径不同）
  if (url.includes('/')) {
    // 如果URL中已包含路径分隔符，说明是相对完整的路径
    const fullUrl = `${backendUrl}${url.startsWith('/') ? '' : '/'}${url}`;
    console.log('使用相对完整路径:', fullUrl);
    return fullUrl;
  } else {
    // 简单文件名，假设是在avatars目录
    const fullUrl = `${backendUrl}/avatars/${url}`;
    console.log('使用简单文件名构建路径:', fullUrl);
    return fullUrl;
  }
})

// 密码表单相关
const passwordFormRef = ref<FormInstance>()
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 通知设置
const notificationSettings = reactive({
  email: true,
  browser: true,
  processingComplete: true,
  newFeatures: true,
  tips: false
})

// 表单验证规则
const profileRules = reactive<FormRules>({
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
})

// 密码验证规则
const passwordRules: FormRules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 提交个人资料表单
const submitProfileForm = async () => {
  if (!profileFormRef.value) return
  
  await profileFormRef.value.validate(async (valid) => {
    if (valid) {
      profileSubmitting.value = true
      try {
        // 使用正确的API路径格式
        const userId = authStore.user?.id
        if (!userId) {
          ElMessage.error('获取用户ID失败')
          return
        }
        
        console.log('正在更新用户信息:', {
          用户ID: userId,
          请求数据: {
            nickname: profileForm.nickname,
            email: profileForm.email,
            phone: profileForm.phone
          },
          Token: authStore.token?.substring(0, 15) + '...'
        })
        
        // 按照API规范构建请求，使用正确的API路径
        const response = await axios.put(`/api/auth/${userId}`, {
          nickname: profileForm.nickname,
          email: profileForm.email,
          phone: profileForm.phone,
          // 如果有新上传的头像，则包含头像信息
          ...(profileForm.avatarUrl !== authStore.user?.avatarUrl ? { avatarUrl: profileForm.avatarUrl } : {})
        }, {
          headers: {
            Authorization: `Bearer ${authStore.token}`
          }
        })
        
        console.log('更新用户信息响应:', response)
        
        if (response.data && response.data.success) {
          ElMessage.success('个人信息更新成功')
          
          // 更新本地表单数据
          await authStore.getCurrentUser()
          Object.assign(profileForm, {
            username: authStore.user?.username || '',
            email: authStore.user?.email || '',
            avatar: authStore.user?.avatar || '',
            avatarUrl: authStore.user?.avatarUrl || '',
            nickname: authStore.user?.nickname || '',
            phone: authStore.user?.phone || ''
          })
        } else {
          ElMessage.error(response.data?.message || '更新失败，请稍后重试')
        }
      } catch (error: any) {
        console.error('更新个人信息失败:', error)
        
        // 详细的错误记录，帮助调试
        console.log('错误详情:', {
          状态码: error.response?.status,
          错误消息: error.response?.data?.message || error.message,
          请求URL: error.config?.url,
          请求方法: error.config?.method
        })
        
        if (error.response?.data?.message) {
          ElMessage.error(error.response.data.message)
        } else if (error.response?.status === 403) {
          ElMessage.error('您没有权限执行此操作，请确认登录状态')
        } else {
          ElMessage.error('更新失败，请稍后重试')
        }
      } finally {
        profileSubmitting.value = false
      }
    }
  })
}

// 处理文件变更事件
const handleAvatarChange: UploadProps['onChange'] = async (uploadFile) => {
  const file = uploadFile.raw
  if (!file) return
  
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isGIF = file.type === 'image/gif'
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isJPG && !isPNG && !isGIF) {
    ElMessage.error('头像只能是 JPG、PNG 或 GIF 格式!')
    return
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过2MB!')
    return
  }
  
  try {
    // 显示上传中状态
    ElMessage({
      message: '正在上传头像...',
      type: 'info'
    })
    uploading.value = true
    
    console.log('准备上传头像:', { 
      文件名: file.name, 
      文件类型: file.type, 
      文件大小: (file.size / 1024).toFixed(2) + 'KB' 
    });
    
    // 使用store的方法上传头像
    const success = await authStore.uploadAvatar(file)
    
    console.log('上传结果:', { 
      成功: success, 
      新头像: authStore.user?.avatar, 
      头像URL: authStore.user?.avatarUrl
    });
    
    if (success) {
      // 更新表单数据
      profileForm.avatar = authStore.user?.avatar || ''
      profileForm.avatarUrl = authStore.user?.avatarUrl || ''
      
      // 成功消息由store中显示，这里不需要重复显示
      console.log('头像上传成功，表单更新:', {
        avatar: profileForm.avatar,
        avatarUrl: profileForm.avatarUrl,
        displayUrl: displayAvatarUrl.value
      })
      
      // 强制刷新显示
      setTimeout(() => {
        // 从DOM中移除并重新添加
        const avatar = document.querySelector('.avatar-container .el-avatar') as HTMLElement;
        if (avatar) {
          const parent = avatar.parentElement;
          if (parent) {
            console.log('强制刷新头像显示');
            avatar.style.display = 'none';
            setTimeout(() => {
              avatar.style.display = '';
            }, 100);
          }
        }
      }, 500);
    }
  } catch (error: any) {
    console.error('上传头像失败:', error)
    if (error.response?.data?.message) {
      ElMessage.error(error.response.data.message)
    } else if (error.message) {
      ElMessage.error(error.message)
    } else {
      ElMessage.error('上传失败，请稍后重试')
    }
  } finally {
    uploading.value = false
  }
}

// 重置表单
const resetForm = () => {
  if (profileFormRef.value) {
    Object.assign(profileForm, {
      username: authStore.user?.username || '',
      email: authStore.user?.email || '',
      avatar: authStore.user?.avatar || '',
      avatarUrl: authStore.user?.avatarUrl || '',
      nickname: authStore.user?.nickname || '',
      phone: authStore.user?.phone || ''
    })
    profileFormRef.value.resetFields()
  }
}

// 在组件挂载时加载当前用户信息
onMounted(() => {
  loadUserInfo()
})

// 加载用户信息
const loadUserInfo = () => {
  Object.assign(profileForm, {
    username: authStore.user?.username || '',
    email: authStore.user?.email || '',
    avatar: authStore.user?.avatar || '',
    avatarUrl: authStore.user?.avatarUrl || '',
    nickname: authStore.user?.nickname || '',
    phone: authStore.user?.phone || ''
  })
}

// 提交密码修改表单
const submitPasswordForm = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    
    passwordSubmitting.value = true
    
    try {
      // 使用API函数修改密码
      const response = await changePassword(
        passwordForm.oldPassword,
        passwordForm.newPassword
      )
      
      if (response.success) {
        ElMessage.success('密码修改成功')
        
        // 清空表单
        passwordForm.oldPassword = ''
        passwordForm.newPassword = ''
        passwordForm.confirmPassword = ''
      } else {
        ElMessage.error(response.message || '修改失败，请稍后重试')
      }
    } catch (error: any) {
      console.error('修改密码失败:', error)
      
      if (error.response && error.response.data) {
        ElMessage.error(error.response.data.message || '修改失败，请检查原密码是否正确')
      } else {
        ElMessage.error('修改失败，请稍后重试')
      }
    }
  } catch (error: any) {
    console.error('表单验证失败:', error)
    ElMessage.error(error.message || '修改失败，请检查输入')
  } finally {
    passwordSubmitting.value = false
  }
}

// 保存通知设置
const saveNotificationSettings = () => {
  // 这里应该调用API保存通知设置
  // const response = await api.updateNotificationSettings(notificationSettings)
  
  ElMessage.success('通知设置保存成功')
}

// 退出登录
const handleLogout = async () => {
  try {
    // 调用登出API
    const response = await axios.post('/api/auth/logout', {}, {
      headers: {
        Authorization: `Bearer ${authStore.token}`
      }
    })
    
    if (response.data.success) {
      // 清除本地存储的用户信息和token
      authStore.logout()
      ElMessage.success('登出成功')
    } else {
      ElMessage.error(response.data.message || '登出失败，请稍后重试')
    }
  } catch (error: any) {
    console.error('登出失败:', error)
    
    // 即使API请求失败，也清除本地状态
    authStore.logout()
    ElMessage.warning('登出请求失败，但已在本地清除登录状态')
  }
}
</script>

<template>
  <div class="settings-container">
    <div class="settings-header">
      <div class="header-bg-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
      </div>
      <div class="header-content">
        <h1 class="page-title">账号设置</h1>
        <p class="page-desc">自定义您的账号和安全偏好设置</p>
      </div>
      <div class="header-icon">
        <div class="icon-circle">
          <el-icon><Setting /></el-icon>
        </div>
      </div>
    </div>
    
    <div class="settings-body">
      <el-card class="tabs-card" shadow="hover">
        <el-tabs v-model="activeTab" tab-position="left" class="custom-tabs">
          <!-- 个人信息 -->
          <el-tab-pane label="个人信息" name="profile">
            <div class="tab-header">
              <div class="tab-title-wrapper">
                <h2>个人信息</h2>
                <div class="title-decoration"></div>
              </div>
              <span class="tab-desc">修改您的个人资料信息</span>
            </div>
            
            <div class="form-wrapper">
              <el-form 
                ref="profileFormRef"
                :model="profileForm"
                :rules="profileRules"
                label-width="100px"
                class="settings-form"
              >
                <el-form-item label="头像" class="avatar-item">
                  <div class="avatar-uploader">
                    <el-upload
                      class="upload-trigger"
                      action="/api/auth/avatar"
                      :auto-upload="false"
                      :show-file-list="false"
                      :on-change="handleAvatarChange"
                      name="file"
                      :disabled="uploading"
                    >
                      <div class="avatar-container">
                        <el-avatar 
                          :size="150" 
                          :src="displayAvatarUrl" 
                          shape="circle" 
                          fit="cover"
                          :key="displayAvatarUrl"
                        >
                          {{ profileForm.username?.charAt(0).toUpperCase() }}
                        </el-avatar>
                        <div class="avatar-overlay">
                          <el-icon v-if="!uploading" class="icon-camera"><Camera /></el-icon>
                          <el-icon v-else class="icon-loading"><Loading /></el-icon>
                        </div>
                      </div>
                    </el-upload>
                    <div class="avatar-tip">{{ uploading ? '上传中...' : '点击更换头像' }}</div>
                  </div>
                </el-form-item>
                
                <el-form-item label="用户名" prop="username" class="form-item">
                  <el-input v-model="profileForm.username" disabled>
                    <template #prefix>
                      <el-icon><User /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                
                <el-form-item label="昵称" prop="nickname" class="form-item">
                  <el-input v-model="profileForm.nickname" placeholder="请输入昵称">
                    <template #prefix>
                      <el-icon><User /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                
                <el-form-item label="邮箱" prop="email" class="form-item">
                  <el-input v-model="profileForm.email" placeholder="请输入邮箱">
                    <template #prefix>
                      <el-icon><Message /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                
                <el-form-item label="手机号" prop="phone" class="form-item">
                  <el-input v-model="profileForm.phone" placeholder="请输入手机号">
                    <template #prefix>
                      <el-icon><Phone /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                
                <el-form-item class="btn-group">
                  <el-button 
                    type="primary" 
                    :loading="profileSubmitting"
                    @click="submitProfileForm"
                    class="btn-save btn-gradient"
                  >
                    保存修改
                  </el-button>
                  <el-button @click="resetForm" class="btn-reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          
          <!-- 修改密码 -->
          <el-tab-pane label="修改密码" name="password">
            <div class="tab-header">
              <div class="tab-title-wrapper">
                <h2>修改密码</h2>
                <div class="title-decoration"></div>
              </div>
              <span class="tab-desc">更新您的账号密码</span>
            </div>
            
            <div class="form-wrapper">
              <el-form
                ref="passwordFormRef"
                :model="passwordForm"
                label-width="100px"
                class="settings-form"
                :rules="passwordRules"
              >
                <el-form-item label="原密码" prop="oldPassword" class="form-item">
                  <el-input
                    v-model="passwordForm.oldPassword"
                    type="password"
                    show-password
                    class="security-input"
                  >
                    <template #prefix>
                      <el-icon><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                
                <el-form-item label="新密码" prop="newPassword" class="form-item">
                  <el-input
                    v-model="passwordForm.newPassword"
                    type="password"
                    show-password
                    class="security-input"
                  >
                    <template #prefix>
                      <el-icon><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                
                <el-form-item label="确认新密码" prop="confirmPassword" class="form-item">
                  <el-input
                    v-model="passwordForm.confirmPassword"
                    type="password"
                    show-password
                    class="security-input"
                  >
                    <template #prefix>
                      <el-icon><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                
                <el-form-item class="btn-group">
                  <el-button
                    type="primary"
                    :loading="passwordSubmitting"
                    @click="submitPasswordForm"
                    class="btn-save btn-gradient"
                  >
                    修改密码
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          
          <!-- 通知设置 -->
          <el-tab-pane label="通知设置" name="notifications">
            <div class="tab-header">
              <div class="tab-title-wrapper">
                <h2>通知设置</h2>
                <div class="title-decoration"></div>
              </div>
              <span class="tab-desc">自定义您的通知偏好</span>
            </div>
            
            <div class="notification-card">
              <div class="notification-section">
                <h3 class="section-title">
                  <el-icon class="section-icon"><Bell /></el-icon>
                  <span>通知接收方式</span>
                </h3>
                <div class="checkbox-group">
                  <el-checkbox v-model="notificationSettings.email" class="custom-checkbox hover-lift">
                    <div class="checkbox-content">
                      <div class="checkbox-title">邮件通知</div>
                      <div class="checkbox-desc">通过邮箱接收通知</div>
                    </div>
                  </el-checkbox>
                  
                  <el-checkbox v-model="notificationSettings.browser" class="custom-checkbox hover-lift">
                    <div class="checkbox-content">
                      <div class="checkbox-title">浏览器通知</div>
                      <div class="checkbox-desc">通过浏览器接收通知</div>
                    </div>
                  </el-checkbox>
                </div>
              </div>
              
              <div class="divider">
                <span class="divider-text">通知内容设置</span>
              </div>
              
              <div class="notification-section">
                <h3 class="section-title">
                  <el-icon class="section-icon"><Bell /></el-icon>
                  <span>通知类型</span>
                </h3>
                <div class="checkbox-list">
                  <el-checkbox v-model="notificationSettings.processingComplete" class="custom-checkbox hover-lift">
                    <div class="checkbox-content">
                      <div class="checkbox-title">处理完成通知</div>
                      <div class="checkbox-desc">在处理完成时接收通知</div>
                    </div>
                  </el-checkbox>
                  
                  <el-checkbox v-model="notificationSettings.newFeatures" class="custom-checkbox hover-lift">
                    <div class="checkbox-content">
                      <div class="checkbox-title">新功能和更新通知</div>
                      <div class="checkbox-desc">接收平台新功能和更新提醒</div>
                    </div>
                  </el-checkbox>
                  
                  <el-checkbox v-model="notificationSettings.tips" class="custom-checkbox hover-lift">
                    <div class="checkbox-content">
                      <div class="checkbox-title">使用技巧和优化建议</div>
                      <div class="checkbox-desc">接收使用建议和技巧提示</div>
                    </div>
                  </el-checkbox>
                </div>
              </div>
              
              <div class="form-actions">
                <el-button type="primary" @click="saveNotificationSettings" class="btn-save btn-gradient">保存设置</el-button>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 账号安全 -->
          <el-tab-pane label="账号安全" name="security">
            <div class="tab-header">
              <div class="tab-title-wrapper">
                <h2>账号安全</h2>
                <div class="title-decoration"></div>
              </div>
              <span class="tab-desc">管理您的账号安全设置</span>
            </div>
            
            <div class="security-content">
              <div class="security-card hover-lift">
                <div class="security-card-header">
                  <div class="card-icon">
                    <el-icon><Key /></el-icon>
                  </div>
                  <div>
                    <h3>登录状态</h3>
                    <div class="card-desc">查看您的登录记录</div>
                  </div>
                </div>
                
                <div class="security-card-body">
                  <div class="security-info-item">
                    <span class="info-label">最后登录时间:</span>
                    <span class="info-value">{{ new Date().toLocaleString() }}</span>
                  </div>
                  <div class="security-info-item">
                    <span class="info-label">最后登录IP:</span>
                    <span class="info-value">未知</span>
                  </div>
                  
                  <div class="security-actions">
                    <el-button type="danger" @click="handleLogout" class="btn-action">退出登录</el-button>
                  </div>
                </div>
              </div>
              
              <div class="security-card hover-lift">
                <div class="security-card-header">
                  <div class="card-icon">
                    <el-icon><Monitor /></el-icon>
                  </div>
                  <div>
                    <h3>设备管理</h3>
                    <div class="card-desc">管理授权设备</div>
                  </div>
                </div>
                
                <div class="security-card-body">
                  <div class="empty-devices">
                    <div class="empty-icon"><el-icon><Monitor /></el-icon></div>
                    <p>暂无已授权设备信息</p>
                    <el-button type="primary" plain class="btn-action">刷新设备列表</el-button>
                  </div>
                </div>
              </div>
              
              <div class="security-card hover-lift">
                <div class="security-card-header">
                  <div class="card-icon alert-icon">
                    <el-icon><WarningFilled /></el-icon>
                  </div>
                  <div>
                    <h3>账号注销</h3>
                    <div class="card-desc">永久删除您的账号</div>
                  </div>
                </div>
                
                <div class="security-card-body">
                  <div class="warning-message">
                    <el-icon class="warning-icon"><WarningFilled /></el-icon>
                    <p>注销账号将永久删除您的所有数据，此操作不可逆</p>
                  </div>
                  
                  <div class="security-actions">
                    <el-button type="danger" plain class="btn-action">申请注销账号</el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 1100px;
  margin: 0 auto;
  color: #333;
}

.settings-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #3a8ee6, #5254ae);
  border-radius: 16px;
  padding: 40px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(58, 142, 230, 0.2);
  overflow: hidden;
}

.header-bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.15;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
}

.shape-1 {
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.2));
}

.shape-2 {
  bottom: -80px;
  left: 10%;
  width: 180px;
  height: 180px;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.1));
}

.shape-3 {
  top: 30%;
  left: 30%;
  width: 80px;
  height: 80px;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.3));
}

.header-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-desc {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
  max-width: 400px;
}

.header-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.icon-circle .el-icon {
  font-size: 36px;
  color: #fff;
}

.settings-body {
  position: relative;
}

.tabs-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.tabs-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.custom-tabs :deep(.el-tabs__header) {
  background: #f8fafc;
  border-right: 1px solid #f0f0f0;
  padding: 15px 0;
}

.custom-tabs :deep(.el-tabs__item) {
  height: 60px;
  padding: 0 28px;
  font-size: 15px;
  transition: all 0.3s;
  border-left: 3px solid transparent;
  margin: 5px 0;
}

.custom-tabs :deep(.el-tabs__item.is-active) {
  color: #409EFF;
  font-weight: 600;
  background: rgba(64, 158, 255, 0.08);
  border-left: 3px solid #409EFF;
  border-right: none;
}

.custom-tabs :deep(.el-tabs__item:hover:not(.is-active)) {
  background: rgba(0, 0, 0, 0.02);
}

.custom-tabs :deep(.el-tabs__content) {
  padding: 0;
}

.tab-header {
  padding: 30px 30px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.tab-title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.tab-header h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #303133;
}

.title-decoration {
  height: 3px;
  width: 40px;
  background: linear-gradient(90deg, #409EFF, #5254ae);
  margin-left: 15px;
  border-radius: 3px;
}

.tab-desc {
  font-size: 14px;
  color: #909399;
}

.form-wrapper {
  padding: 30px;
}

.settings-form {
  max-width: 600px;
}

.form-item {
  margin-bottom: 24px;
}

.form-item :deep(.el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s;
  border-radius: 8px;
}

.form-item :deep(.el-input__wrapper):hover,
.form-item :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.form-item :deep(.el-input__prefix) {
  color: #5254ae;
}

.btn-group {
  margin-top: 35px;
}

.btn-save {
  min-width: 120px;
  height: 40px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s;
}

.btn-gradient {
  background: linear-gradient(45deg, #3a8ee6, #5254ae);
  border: none;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(64, 158, 255, 0.25);
}

/* 安全设置样式 */
.security-content {
  padding: 20px 30px 30px;
}

.security-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  border: 1px solid #f0f0f0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.security-card-header {
  padding: 20px;
  border-bottom: 1px solid #f5f5f5;
  background: linear-gradient(to right, #f8fafc, #ffffff);
  display: flex;
  align-items: center;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a8ee6, #5254ae);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(58, 142, 230, 0.2);
}

.alert-icon {
  background: linear-gradient(135deg, #f56c6c, #e67e7e);
  box-shadow: 0 4px 10px rgba(245, 108, 108, 0.2);
}

.security-card-header h3 {
  margin: 0 0 5px;
  font-size: 18px;
  color: #303133;
}

.card-desc {
  font-size: 13px;
  color: #909399;
}

.security-card-body {
  padding: 25px;
}

.security-info-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #f5f5f5;
}

.security-info-item:last-of-type {
  border-bottom: none;
}

.info-label {
  color: #606266;
  width: 150px;
  font-weight: 500;
}

.info-value {
  font-weight: 500;
  color: #303133;
}

.security-actions {
  margin-top: 25px;
  text-align: right;
}

.btn-action {
  min-width: 120px;
  height: 38px;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.warning-message {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.05);
  border-radius: 8px;
  border-left: 3px solid #e6a23c;
}

.warning-icon {
  margin-right: 10px;
  font-size: 20px;
}

.warning-message p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.security-input {
  width: 100%;
}

.empty-devices {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  color: #909399;
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 15px;
  color: #c0c4cc;
}

.empty-devices p {
  margin: 0 0 20px;
}

/* 通知设置样式 */
.notification-card {
  padding: 25px 30px 30px;
}

.notification-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #303133;
  display: flex;
  align-items: center;
}

.section-icon {
  margin-right: 10px;
  font-size: 20px;
  color: #5254ae;
  background: rgba(82, 84, 174, 0.1);
  padding: 8px;
  border-radius: 8px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.custom-checkbox {
  margin-right: 0 !important;
  display: block;
  background: #f9fafb;
  border-radius: 10px;
  padding: 18px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.custom-checkbox:hover {
  border-color: #dcdfe6;
  background: #f5f7fa;
}

.checkbox-content {
  margin-left: 8px;
}

.checkbox-title {
  font-weight: 500;
  font-size: 16px;
  color: #303133;
}

.checkbox-desc {
  font-size: 13px;
  color: #909399;
  margin-top: 6px;
}

.divider {
  position: relative;
  height: 1px;
  background: #f0f0f0;
  margin: 35px 0;
  text-align: center;
}

.divider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 0 15px;
  font-size: 14px;
  color: #909399;
}

.form-actions {
  margin-top: 35px;
  border-top: 1px solid #f5f5f5;
  padding-top: 25px;
  text-align: center;
}

/* 头像上传相关样式 */
.avatar-container {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s;
  margin-bottom: 10px;
  width: 150px;
  height: 150px;
  display: inline-block;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: 3px solid #fff;
}

.avatar-container:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  border-radius: 50%;
}

.avatar-container:hover .avatar-overlay {
  opacity: 1;
}

.icon-camera {
  font-size: 36px;
  color: white;
}

.icon-loading {
  font-size: 36px;
  color: white;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.avatar-tip {
  color: #409EFF;
  font-size: 14px;
  margin-top: 12px;
  font-weight: 500;
}

.avatar-uploader {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-trigger {
  cursor: pointer;
  display: inline-block;
}

.upload-trigger :deep(.el-upload) {
  display: block;
  cursor: pointer;
}

.avatar-item :deep(.el-avatar) {
  border: 4px solid #f5f7fa;
}

@media (max-width: 768px) {
  .settings-header {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
  }
  
  .header-content {
    margin-bottom: 25px;
  }
  
  .icon-circle {
    margin: 0 auto;
  }
  
  .tabs-card {
    border-radius: 12px;
  }
  
  .custom-tabs :deep(.el-tabs__item) {
    height: 50px;
    padding: 0 16px;
  }
  
  .tab-header {
    padding: 20px;
  }
  
  .form-wrapper,
  .security-content,
  .notification-card {
    padding: 20px;
  }
  
  .checkbox-group {
    flex-direction: column;
    gap: 15px;
  }
  
  .history-list {
    grid-template-columns: 1fr;
  }
  
  .avatar-section {
    width: 100%;
  }
}
</style> 